<template>
  <div class="ProcessTimeline flex-column" :class="{ close: isClose }">
    <div class="item-common-title" v-show="!isClose">事项审批流程记录</div>
    <div class="timeline flex-1" v-show="!isClose">
      <c-timeline>
        <c-timeline-item v-for="item in list" :key="item.id">
          <div class="flow_name">
            {{ item.flowName }}
          </div>
          <p class="time">{{ item.createTime }}</p>
          <p>
            {{
              item.deptName +
              '-' +
              item.userName +
              '进行了' +
              item.examineResultName +
              '操作'
            }}
          </p>
          <p v-if="item.descriptions">处理意见： {{ item.descriptions }}</p>
        </c-timeline-item>
      </c-timeline>
    </div>
    <div class="ProcessTimeline-scale flex-center" @click="closeTimeline">
      <i class="el-icon-d-arrow-right"></i>
    </div>
  </div>
</template>
<script>
import { getItemHistoryProcess } from '@/api/publish.js'
export default {
  name: 'ProcessTimeline',
  data() {
    return {
      isClose: false,
      list: [],
    }
  },
  created() {
    this.getItemHistoryProcess()
  },
  methods: {
    closeTimeline() {
      this.isClose = !this.isClose
    },
    getItemHistoryProcess() {
      getItemHistoryProcess({
        itemCode: this.$route.query.itemCode,
      }).then(({ success, data }) => {
        if (success && data) {
          this.list = data
        }
      })
    },
  },
}
</script>
<style lang="scss">
.ProcessTimeline {
  width: 300px;
  height: 100%;
  position: relative;
  padding-left: 20px;
  border-left: 1px solid #eee;
  .timeline {
    min-height: 0;
    overflow-y: auto;
    .flow_name {
      font-weight: 600;
    }
    .time {
      color: silver;
      font-size: 12px;
    }
  }
  &-scale {
    width: 20px;
    height: 30px;
    position: absolute;
    left: 0;
    top: 50%;
    box-shadow: 0 0 10px #ccc;
    font-size: 20px;
    cursor: pointer;
    &:hover {
      color: $--color-primary;
    }
  }
  &.close {
    width: 0px;
    .ProcessTimeline-scale {
      i {
        transform: rotate(180deg);
      }
    }
  }
}
</style>
